iT邦幫忙

第 12 屆 iThome 鐵人賽

0
Modern Web

Vue菜鳥的自我學習days系列 第 35

35.Local Storage

  • 分享至 

  • xImage
  •  

Local Storage (更准确地说是“Web Storage”)适合存储你希望进行持久化的较小数据集,比如用户偏好设置或表单数据。更大规模和更复杂的数据则适合存储在 IndexedDB 中。

<div id="app">
  My name is <input v-model="name">
</div>
const app = new Vue({
  el: '#app',
  data: {
    name: ''
  },
  mounted() {
    if (localStorage.name) {
      this.name = localStorage.name;
    }
  },
  watch: {
    name(newName) {
      localStorage.name = newName;
    }
  }
});

为了将数据写入,我们侦听 name 值的变化,并将数据实时写入。
我们使用 mounted 方法从 localStorage 中加载数据。

将变化的值立即写入或许是不被推荐的;於是改良為多了一个可以运行 persist 方法的按钮,数据只会在点击按钮后才被持久化。

<div id="app">
  <p>
    My name is <input v-model="name">
    and I am <input v-model="age"> years old.
  </p>
  <p>
    <button @click="persist">Save</button>
  </p>
</div>
const app = new Vue({
  el: '#app',
  data: {
    name: '',
    age: 0
  },
  mounted() {
    if (localStorage.name) {
      this.name = localStorage.name;
    }
    if (localStorage.age) {
      this.age = localStorage.age;
    }
  },
  methods: {
    persist() {
      localStorage.name = this.name;
      localStorage.age = this.age;
      console.log('now pretend I did more stuff...');
    }
  }
})

我们也可以在数据被存储之前,对数据进行验证或转换。ex:可以将日期一并存储进去来记录这些数据是何时被存储的。有了这些元数据,mounted 方法就可以通过逻辑判断来决定是否再次对数据进行存储。


上一篇
34.Form Handling
下一篇
36.Local Storage2
系列文
Vue菜鳥的自我學習days39
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言